<template>
  <view class="album">
    <view class="cover_wrap">
      <image :src="album.cover"></image>
      <view class="name_focus_wrap">
        <view class="name">{{album.name}}</view>
        <view class="focus">关注专辑</view>
      </view>
    </view>
    <view class="user_desc_wrap">
      <view class="user_wrap">
        <view class="user_avatar">
          <image
            mode="widthFix"
            :src="album.user.avatar||'http://pic.616pic.com/ys_bnew_img/00/04/45/NElJeK0ngd.jpg'"
          ></image>
        </view>
        <view class="user_name">{{album.user.name}}</view>
      </view>
      <view class="desc">{{album.desc}}</view>
    </view>
    <view class="album_list">
      <view
        class="album_item"
        v-for="(item,index) in wallpaper"
        :key="item.id"
      >
        <goDetail
          :list="wallpaper"
          :index="index"
        >
          <image
            mode="aspectFill"
            :src="item.thumb+item.rule.replace('$<Height>','360')"
          ></image>
        </goDetail>
      </view>

    </view>
  </view>
</template>

<script>
import goDetail from '../../components/goDetail'
export default {
  components: {
    goDetail
  },
  data () {
    return {
      // 专辑id
      id: '',
      // 查询参数
      queryInfo: {
        limit: 30,
        order: 'new',
        skip: 0,
        first: 1
      },
      // 是否还有下一页
      hasMore: true,
      // 专辑相关信息
      album: {},
      //专辑相关图片
      wallpaper: []
    }
  },
  onLoad (options) {
    this.id = options.id
    // this.id = "5d5f8e45e7bce75ae7fb8278"
    this.getList()
  },
  // 页面触底事件
  onReachBottom () {
    if (!this.hasMore) {
      return wx.showToast({
        title: '没有更多数据了',
        icon: 'none',
      });
    }
    this.queryInfo.skip += this.queryInfo.limit
    // 每当触底就不是第一次获取请求了
    this.queryInfo.first = 0
    this.getList()
  },

  methods: {
    getList () {
      this.$request({
        url: `/image/v1/wallpaper/album/${this.id}/wallpaper`,
        data: this.queryInfo
      }).then(res => {
        console.log(res);
        // 如果是第一次请求
        if (this.queryInfo.first == 1) {
          this.album = res.album
        }

        if (res.wallpaper.length == 0) {
          wx.showToast({
            title: '没有更多数据了',
            icon: 'none',
          });
          this.hasMore = false
          return
        }
        this.wallpaper = [...this.wallpaper, ...res.wallpaper]

      })
    }
  }

}
</script>

<style lang="scss" scope>
.album {
  .cover_wrap {
    position: relative;
    image {
      width: 100%;
    }

    .name_focus_wrap {
      padding: 20rpx;
      display: flex;
      justify-content: space-between;
      // transform: translateY(-100%);
      position: absolute;
      bottom: 0rpx;
      width: 100%;
      .name {
        color: #ffffff;
        font-size: 36rpx;
      }

      .focus {
        background-color: $color;
        color: #ffffff;
        padding: 10rpx;
        border-radius: 8rpx;
      }
    }
  }

  .user_desc_wrap {
    margin-bottom: 30rpx;
    .user_wrap {
      display: flex;
      justify-content: start;
      align-items: center;
      padding: 20rpx;
      .user_avatar {
        width: 70rpx;
        border-radius: 70rpx;
        overflow: hidden;
        margin-right: 20rpx;
        image {
          width: 100%;
        }
      }

      .user_name {
        font-size: 35rpx;
        font-weight: 700;
      }
    }

    .desc {
      padding: 0 20rpx;
      font-size: 30rpx;
      color: #666;
    }
  }
  .album_list {
    display: flex;
    flex-wrap: wrap;
    .album_item {
      width: 33.33%;

      border: 4rpx solid #ffffff;
      image {
        width: 100%;
        height: 33.33vw;
      }
    }
  }
}
</style>